<template>
	
	<!-- 头部菜单 -->
	<view class="navibar">
		<i class="iconfont icon-saoma2 mask" style="font-size: 48rpx;"></i>
		<u-tabs :list="list1" @change="changeTab" :current="0"></u-tabs>
		<i class="iconfont icon-erweima2 mask" style="font-size: 42rpx;"></i>
	</view>
	
	
	<!-- 列表内容 -->
	<view v-if="current == 0">
		<component-a></component-a>
	</view>
	<view v-if="current == 1">
		<component-b></component-b>
	</view>
	
	<!-- 列表 -->
	<u-empty
		mode="car"
		icon="http://cdn.uviewui.com/uview/empty/car.png"
	>
	</u-empty>

	
</template>

<script>
	import componentA from "@/pages/my/a.vue"
	import componentB from "@/pages/my/b.vue"
	
	export default {
		components:{
			componentA,
			componentB
		},
		data() {
			return {
				current: 0,
				list1: [{
						name: '个人',
				}, {
						name: '设置',
				}],
				list: [{
						type: 'default',
						title: '收藏',
						message: "收藏",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					},
					{
						type: 'warning',
						position: "top",
						title: '收藏',
						message: "收藏",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png'
					},
					{
						type: 'loading',
						title: '客服中心',
						message: "客服中心",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
					}
				],
			}
		},
		computed: {
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			}, 
		},
		methods: {
			changeTab(item) {
				console.log('item1', item);
				this.current=item.index;
				// console.log('item', this.current);
			}
		}
	}
</script>

<style lang="scss">

@import "@/static/iconfont/iconfont.css";

.header_title{
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 20rpx;
	padding: 10rpx;
	background-color: #F6F6F6;
}

.mask{
	padding: 13rpx;
	background-color: #F6F6F6;
	border-radius: 50%
}

// 头部菜单
.navibar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5rpx 18rpx;
	border-bottom: 1rpx solid #eee;
	background-color: #fff;
}
</style>



